<template>
  <div class="resContain">
    <div class="resSearch">
        <span>资源名称</span>
        <el-input
            v-model="subName"
            clearable
            style="width: 120px;"
        >
        </el-input>
        <el-button type="primary"><i class="el-icon-search"></i> 查询</el-button>
    </div>
    <i class="el-icon-arrow-left" @click="drawer = true"></i>
    <div class="drawer-container">
        <!-- 侧边栏 -->
        <el-drawer
        title="侧边导航"
        :visible.sync="drawer"
        direction="ltr"
        size="20%"
        @opened="handleOpen"
        @closed="handleClose"
        append-to-body="false"
        >
        <!-- 树形菜单 -->
        <el-menu :default-openeds="['1', '2', '3']">
            <el-submenu index="1">
            <template slot="title"><i class="el-icon-menu"></i>用户中心</template>
            <el-menu-item index="1-1">子系统1</el-menu-item>
            <el-menu-item index="1-2">子系统2</el-menu-item>
            <!-- 更多子菜单项 -->
            </el-submenu>
            <!-- 更多的 el-submenu 或 el-menu-item -->
        </el-menu>
        </el-drawer>
    </div>
    <div class="resMain">
        <div class="resButton">
            <addResource></addResource>
            <el-button type="primary"><i class="el-icon-copy-document"></i> 复制</el-button>
            <el-button type="danger"><i class="el-icon-delete"></i> 删除</el-button>
            <el-button type="primary"><i class="el-icon-refresh"></i> 刷新</el-button>
            <el-dialog
                title="选择要展示的列"
                :visible.sync="colDialog"
                width="30%"
                :before-close="handleClose"
                append-to-body>
                <template>
                    <el-checkbox v-model="checkedFather">父亲节点</el-checkbox>
                    <el-checkbox v-model="checkedChild">子系统</el-checkbox>
                    <el-checkbox v-model="checkedUrl">URL</el-checkbox>
                    <el-checkbox v-model="checkedApi">API</el-checkbox>
                    <el-checkbox v-model="checkedType">资源类型</el-checkbox>
                    <el-checkbox v-model="checkedOpen">打开图标</el-checkbox>
                    <el-checkbox v-model="checkedClose">关闭图标</el-checkbox>
                </template>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="colDialog = false">取 消</el-button>
                    <el-button type="primary" @click="colDialog = false">保存</el-button>
                </span>
            </el-dialog>
            <i class="el-icon-menu colMenu" @click="colDialog=true"></i>
        </div>
        <div class="resTable">
            <resourceTable> </resourceTable>
        </div>
    </div>
  </div>
</template>

<script>
import addResource from "../../components/Resource/addResource.vue";
import resourceTable from "../../components/Resource/resourceTable.vue";
export default {
    name:"resourceIndex",
    components:{addResource,resourceTable},
    data(){
        return{
            colDialog:false,
            addDialog:false,
            checkedFather:false,
            checkedChild:false,
            checkedUrl:false,
            checkedApi:false,
            checkedType:false,
            checkedOpen:false,
            subSystemTable:["用户中心管理","自动化测试系统","业务管理系统"],
            fatherNodeTable:["用户中心管理","自动化测试系统","业务管理系统"],
            currentPage:"1",
            drawer:false,
        }
    },
    methods:{
        
    }

}
</script>

<style>
.resContain{
    position:fixed;
    top:150px;
    left:220px;
}
.resSearch{
    width:1200px;
    margin-bottom: 30px;
}
.resSearch span{
    margin-right:10px;
}
.resSearch .el-input{
    margin-right:80px;
}
.resMain{
    margin-top:10px;
    border:1px solid rgb(234, 217, 217);
    border-radius: 15px; /* 设置圆角 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
}
.resTable .block{
    margin-top:20px;
    margin-left:10px;
}
.resButton {
  display: flex;          /* 开启 Flexbox 布局 */
  align-items: center;    /* 垂直居中对齐 */
  justify-content: flex-start; /* 水平排列在开始位置 */
  margin-top: 10px;      /* 根据需要调整上边距 */
  margin-bottom: 10px;
  margin-left:20px;
}
.resButton .colMenu{
    position:relative;
    left:820px;
    top:10px;
    font-size:30px;
    color:rgb(83, 167, 235);
    cursor: pointer;
}
.resButton .el-button{
    margin-right:10px;
}
.addInfo .el-dialog{
    height: 400px;
    width:800px;
    background: #fff; /* 对话框背景颜色 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 对话框阴影 */
}
.resButton .el-input{
    width:200px;
    float: left;
}
.resButton .el-form-item{
    float:left;
}
.resButton .dialog-footer{
    margin-top:420px;
}
.drawer-container{
    position: relative;
    width: 100%; /* 根据需要调整 */
    height: 100%;
}
</style>